<template>
  <p v-if="!showInput" @click="showInput = true">{{ currentValue }}</p>
  <el-input v-else v-model="currentValue" size="small" style="width: 100%" :maxlength="props.max" @blur="emitValue"></el-input>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: String,
  max: Number,
})

const currentValue = ref('')
const showInput = ref(props.modelValue ? false : true)
const emits = defineEmits(['update:modelValue'])
const emitValue = () => {
  if (currentValue.value) {
    showInput.value = false
  }

  emits('update:modelValue', currentValue.value)
}

watch(
  () => props.modelValue,
  () => {
    currentValue.value = props.modelValue
  },
  { immediate: true }
)
</script>

<style lang="less" scoped>
p {
  margin: 0;
}
</style>
